import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxTaskProcessBarChart extends CockpitChartBaseProps {
  img?: any;
  needPlan?: boolean;
  needReal?: boolean;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxTaskProcessBarChartOption = ({
  dataSource = [],
  needPlan = true,
  needReal = true,
}: KxTaskProcessBarChart): EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(255,255,255,0.1)",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
          backgroundColor: "#7B7DDC",
        },
      },
      textStyle: {
        color: "#fff",
      },
    },

    grid: {
      left: "12%",
      top: "12%",
    },
    xAxis: {
      data: dataSource.map((d) => d.name || ""),
      axisLine: {
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.2,
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        fontSize: 14,
        color: "#FDFFFF",
        margin: 19,
        overflow: "truncate",
        width: 65,
        align: "center",
        interval: 0,
      },
    },
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#FEFFFF",
            opacity: 0.2,
          },
        },

        axisLabel: {
          fontSize: 12,
          fontFamily: "Arial",
          color: "#FDFFFF",
          opacity: 0.8,
          formatter: "{value}",
        },
      },
    ],

    series: [
      needReal
        ? {
            name: needPlan ? "执行" : "",
            type: "bar",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#FF849C" },
                { offset: 1, color: "#FFCE9F" },
              ]),
            },
            data: dataSource.map((d) => d.amount || 0),
          }
        : null,

      needPlan
        ? {
            name: "计划",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(12,24,72,0.5)" },
                { offset: 0.2, color: "rgba(12,24,72,0.3)" },
                { offset: 1, color: "rgba(12,24,72,0)" },
              ]),
            },
            z: -12,

            data: dataSource.map((d) => d.planAmount || 0),
          }
        : null,
    ].filter(Boolean) as any,
  };
};

const KxTaskProcessBarChart = ({
  reactEChartsProps,
  dataSource,
  height = "468px",
  needPlan = true,
  needReal = true,
}: KxTaskProcessBarChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: height,
      }}
      option={getKxTaskProcessBarChartOption({
        dataSource,
        needPlan,
        needReal,
      })}
    />
  );
};

export default KxTaskProcessBarChart;
